<template>
  <view class="past" >
    <view class="content" @click="goToPastHots">
      <view class="head">
        <!-- <view class="main">往期爆款</view>
        <view class="sub">全网抄底放心买</view> -->
      </view>
      <swiper class="swiper" :vertical="true" :indicator-dots="false" :autoplay="true" :interval="4000" :duration="3000" :circular="true" :touchable="false">
        <swiper-item v-for="(hotItems, index) in hots" :key="index">
          <view class="swiper-item">
            <view class="items">
              <view class="item" v-for="(hot,index) in hotItems" :key="index">
                <image class="cover"  :src="hot.cover_url"></image>
                <view class="desc">
									<view class="title">{{ hot.title|ellipsis(8) }}</view>
									<view class="gold-coins">
										<image src="/static/images/gold-coins-text-icon.png" class="gold-coins-text-icon" mode=""></image>
									  <view class="gold-coins-num">
										  <text class="gold-coins-need">立得<text>{{ parseInt(hot.price_lowest) }}</text> 金豆</text>
									  </view>
									</view>
                  <!-- <view class="price">
                    <view class="unit">￥</view>
                    <view class="money">{{ hot.price_lowest }}</view>
										<view class="normal">￥{{ hot.product.price_market }}</view>
                  </view> -->
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import {getHotProducts} from "api/productApi"
import Pagination from "mixins/Pagination"
export default {
  name: "PastHotProductsCom",
	mixins: [Pagination],
  data: () => ({
    // hots: []
  }),
	props: {
		hots:{
			default:[]
		}
	},
  methods: {
    async loadHotProducts() {
      const response = await getHotProducts({
        page: 1,
        "filter[is_today]": 0,
        include: 'product'
      })
      const hots = response.data
      let newHots = []
      let tempHots = []
      for (let i = 0; i < hots.length; i++) {
        if ((i+1)%3 !== 0) {
          tempHots.push(hots[i])
        } else {
          tempHots.push(hots[i])
          newHots.push(tempHots)
          tempHots = []
        }
      }
      this.hots = newHots
    },
    goToPastHots() {
      // uni.navigateTo({url: `/packs/pages/product/hots`})
			uni.navigateTo({
				url:'/pages/activity/activity'
			})
    }
  },
	async beforeMount(){
		// await this.loadHotProducts()
	},
  async created() {
    // await this.loadHotProducts()
  }
}
</script>

<style lang="scss" scoped>
.past {
  .content {
    width: 350rpx;
    height: 536rpx;
    border-radius: 16rpx;
    border: 1px #EEEEEE solid;
    background: white;
    .head {
      width: 350rpx;
      height: 86rpx;
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
      padding-top: 10rpx;
      padding-left: 10rpx;
      padding-right: 10rpx;
      background-size: 350rpx 86rpx;
      background-repeat: no-repeat;
      // background-image: url("https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/product/hot-title-bg.png");
			 background-image: url("/static/images/hot-title-bg.png");
      .main {
        font-size: 36rpx;
        color: #333333;
      }
      .sub {
        font-size: 24rpx;
        color: #999999;
      }
    }
    .swiper {
      width: 100%;
      height: 435rpx;
      .swiper-item {
        .items {
          padding-bottom: 10rpx;
          padding-left: 10rpx;
          padding-right: 10rpx;
          .item {
            display: flex;
            // margin-top: 15rpx;
            // padding-top: 12rpx;
						margin-bottom: 27rpx;
            .cover {
              width: 110rpx;
              height: 110rpx;
              border-radius: 6rpx;
              margin-right: 15rpx;
            }
            .desc {
              width: 200rpx;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .title {
                font-size: 24rpx;
								height: 48rpx;
              }
              .price {
                display: flex;
                align-items: baseline;
                .unit {
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #FF4924;
                }
                .money {
                  font-size: 28rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #FF4924;
                }
								.normal{
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #999999;
									text-decoration: line-through;
									margin-left: 8rpx;
								}
              }
            }
          }
        }
      }
    }
  }
}
.gold-coins{
		width: fit-content;
		height: 28rpx;
		background: #FEECDF;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10rpx 0 4rpx 0rpx;
	}
	.gold-coins-text-icon{
		display: block;
		width: 32rpx;
		height: 24rpx;
	}
	.gold-coins-text{
		width: 54rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF4924;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 5rpx;
	}
	.gold-coins-num{
		min-width: 64rpx;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		.redbg{
			display: block;
			width: 100%;
			height:100%;
			position: absolute;
			right: 0;
			top:0;
			z-index: 0;
		}
		.gold-coins-need{
			height: 100%;
			position: relative;
			z-index: 1;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #77493B;
			padding: 0 8rpx;
			display: flex;
			align-items: center;
			font-size: 22rpx;
			line-height: 22rpx;
			text{
				font-size: 24rpx;
			}
		}
	}
</style>
